import { PropsWithChildren, memo } from 'react'
import { styled } from '@umijs/max'

const Container = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
`

const Item = styled.div`
  width: 100%;
  display: flex;
  gap: 8px;
`

const Label = styled.div<{width: number}>`
  width: ${props => props.width}px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;

  &::after {
    content: ':';
  }
`

const Content = styled.div`
  flex: 1;
  overflow: hidden;
  white-space: no-wrap;
  text-overflow: ellipsis;
`

export type ColumnDescData = {
  label: string
  value: React.ReactNode
}

export interface ColumnDescProps extends PropsWithChildren {
  labelWidth?: number
  list: ColumnDescData[]
}

const ColumnDesc: React.FC<ColumnDescProps> = props => {
  return (
    <Container>
      {
        props.list.map(item => (
          <Item key={item.label}>
            <Label width={props.labelWidth || 64}>{item.label}</Label>
            <Content>{item.value}</Content>
          </Item>
        ))
      }
    </Container>
  )
}

export default memo(ColumnDesc)
